<!-- 没有响应式数据，只做渲染 -->
<script>
  export default {
    name: 'StaticComponentShowName',
    functional: true,
    props: {
      nameList: {
        type: Array,
        default: _ => []
      }
    },
    render(h, { props }) {
      const { nameList } = props;
      const vNode = [];
      if (nameList && nameList.length > 0) {
        vNode.push(
          <div class="name-list-container">
            {
              nameList.map(item => {
                return (
                  <span key={item.id}>{ item.name }</span>
                )
              })
            }
          </div>
        )
      }
      return vNode;
    }
  }
</script>

<style lang="scss" scoped>
  .name-list-container {
    span {
      padding: 0 20px;
    }
  }
  .name-list-container>:first-child {
    padding: 0 20px 0 0 !important;
  }
</style>
